<template>
<view v-if="d">
  <view>
    <u-swiper
        :height="600"
        mode="number"
        :borderRadius="0"
        indicatorPos="bottomRight"
        :list="bannerList"
    ></u-swiper>
  </view>
  <view class="title-wrap">
    <view class="title">
      <text>{{ d.name }}</text>
      <button open-type="share">
        <u-icon name="share" size="40" color="#969696"></u-icon>
      </button>
    </view>
    <view class="desc">
      {{ d.shop_desc }}
    </view>
  </view>
  <view class="company-wrap">
    <view class="left">
      <view class="name">{{ d.name }}</view>
      <view class="address">{{ d.address }}</view>
    </view>
    <view class="right">
      <view class="icon-wrap" @click="onNav">
        <image src="https://de.ccbnd.net/static/miniapp/d-nav.png"></image>
        <view>导航</view>
      </view>
      <view class="icon-wrap" @click="onCallPhone">
        <image src="https://de.ccbnd.net/static/miniapp/d-tel.png"></image>
        <view>
          电话
        </view>
      </view>
    </view>
  </view>
  <view class="detail-wrap">
    项目详情
  </view>
  <view>
    <u-parse :html="d.content"></u-parse>
  </view>

</view>
</template>

<script>
export default {
  computed: {
    bannerList() {
      if (this.d) {
        return this.d.image_bj_arr.map(item => item.img_url);
      }
      return [];
    }
  },
  data() {
    return {
      d: null,

    };
  },
  onLoad({id}) {
    this.init(id);
  },
  methods: {
    onCallPhone() {
      uni.makePhoneCall({
        phoneNumber: this.d.mobile
      })
    },
    onNav() {
      let d = this.d;
      uni.openLocation({
        longitude: parseFloat(d.lng),
        latitude: parseFloat(d.lat),
        fail(err) {
          console.log('err', err);
        }

      })

    },
    async getLocal() {
      return new Promise((resolve, reject) => {
        uni.getLocation({
          type: 'gcj02', //返回可以用于uni.openLocation的经纬度
          success: function (res) {
            resolve(res);
          },
          fail(err) {
            reject(err);
          }
        });
      })
    },
    async init(id) {
      uni.showLoading({title: '加载中...'});
      let localRes = {
        longitude: '43.886821',
        latitude: '125.324736',
      };
      try {
        let r = await this.getLocal();
        localRes.longitude = r.longitude;
        localRes.latitude = r.latitude;
      } catch (e) {

      }
      this.$http.getLocalShopDetail({id, longitude: localRes.longitude, latitude: localRes.latitude,}).then((res) => {
        this.d = res.data;
      }).finally(() => {
        uni.hideLoading();
      });
    }
  },
}
</script>

<style scoped lang="scss">
.detail-wrap {
  color: white;
  text-align: center;
  background: #f24137;
  padding: 20rpx 0;
  letter-spacing: 2rpx;
}

.company-wrap {
  background: white;
  padding: 30rpx;
  margin: 20rpx 0;
  display: flex;

  .left {
    flex: 1;

    .name {
      font-weight: bold;
      margin-bottom: 10rpx;
    }

    .address {
      margin-top: 10rpx;
      letter-spacing: 2rpx;
      color: #666666;
      line-height: 1.4;
    }
  }

  .right {
    flex-shrink: 0;
    display: flex;

    .icon-wrap {
      width: 100rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-end;

      image {
        width: 60rpx;
        height: 60rpx;
        margin-bottom: 10rpx;
      }

      color: #221915;

    }

  }
}

.title-wrap {
  background: white;
  padding: 30rpx;

  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 30rpx;
    font-weight: bold;
    letter-spacing: 2rpx;

    text {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 1;
      word-break: break-all;
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }

    button {
      flex-shrink: 0;
      background: white;
    }

    button::after {
      border-width: 0;
    }
  }

  .desc {
    margin-top: 10rpx;
    letter-spacing: 2rpx;
    color: #585657;
    line-height: 1.4;
  }
}

</style>
